<template>
  <div>
    <PageableTable
      :loading="false"
      :data="resources"
      :table-height="500"
      :disable-pageable="true"
      class="fixed-table-table"
    >
      <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
        <template slot-scope="scope">
          <column-render :render="column.render" :row="scope.row" :column="column" />
        </template>
      </el-table-column>
    </PageableTable>
  </div>
</template>

<script>

import PageableTable from '@neu/biz-core/components/PageableTable'
import { unfinishedItemsByMonthId } from '@neu/dcom-ui/api/monthWeekly.js'
export default {
  name: 'UnCompleteViewForm',
  components: {
    PageableTable
  },
  props: {
    id: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      title: '新增',
      resources: [],
      insideColumns: [
        { title: '未完成服务项', key: 'name' },
        { title: '未完成原因', key: 'reason' },
        { title: '计划及处理方法', key: 'solution' },
        { title: '运维工程师', key: 'operationName' }
      ]
    }
  },
  watch: {
    id: {
      handler() {
        if (this.id) {
          this.fetch()
        }
      },
      immediate: true
    }
  },

  methods: {
    fetch() {
      unfinishedItemsByMonthId(this.id).then(res => {
        this.resources = res.data
      })
    }
  }
}
</script>
